import Message from "@/components/common/message/Message.vue";
import {App, createVNode, render} from 'vue'

/**
 * 显示一个消息通知
 *
 * 此函数用于在界面上显示一个带有指定类型和持续时间的消息通知它首先会创建一个对应的VNode，
 * 然后将这个VNode渲染到一个新创建的div容器中，最后将这个容器添加到页面的body元素中消息显示
 * 一段时间后，会自动从界面上移除
 *
 * @param message 消息文本，是需要显示的消息内容
 * @param type 消息类型，默认为info，可以是其他类型如warning、error等，用于区分不同的消息级别
 * @param showClose 是否显示关闭按钮，默认为false
 * @param duration 消息显示的持续时间，默认为3000毫秒（3秒）这期间消息会显示在界面上
 */
const message = (message: string, type: string = 'info', showClose: boolean = false, duration: number = 3000) => {

    // 创建一个带有消息内容、类型和持续时间的VNode
    const vNode = createVNode(Message, {message, messageType: type,showClose})

    // 创建一个用于承载消息的div容器
    const container = document.createElement('div')

    // 将创建的VNode渲染到容器中
    render(vNode, container)

    // 将容器添加到页面的body元素中，使消息得以显示
    document.body.appendChild(container)

    // 设置一个定时器，用于在指定的持续时间后移除消息
    setTimeout(() => {
        // 通过渲染null来移除VNode
        render(null, container)

        // 从body中移除容器，完成消息的移除过程
        document.body.removeChild(container)
    }, duration)
}


export default {
    // 默认会注入 app
    install(app: App) {
        app.config.globalProperties.$Message = message
    }
}



